<template>
    <div class="platformContainer">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="card_title">WIFI政策</span>
            </div>
            <div class="systemSettingsNav">
                <el-menu :default-active="ml_defaultIndex" class="el-menu-demo" mode="horizontal" @select="ml_handleSelect">
                    <el-menu-item index="ml_tag1">访问限制</el-menu-item>
                    <el-menu-item index="ml_tag2">内容过滤器</el-menu-item>
                    <el-menu-item index="ml_tag3">密码</el-menu-item>
                    <el-menu-item index="ml_tag4">Wi-Fi</el-menu-item>
                    <el-menu-item index="ml_tag5">Exchange ActiveSync</el-menu-item>
                    <el-menu-item index="ml_tag6">邮件</el-menu-item>
                    <el-menu-item index="ml_tag7">Web Clip</el-menu-item>
                </el-menu>
            </div>
            <div class="sf_main" v-if="ml_activeIndex === 'ml_tag1'">
                <el-card class="box-card">
                    <h3>访问限制</h3>
                    <span class="tag1_text">使用此部分来限制用户可以使用的App、设备功能和媒体内容</span>
                    <el-button>配置</el-button>
                </el-card>
            </div>
            <div class="sf_main" v-if="ml_activeIndex === 'ml_tag2'">
                <el-card class="box-card">
                    <h3>内容过滤器(仅限受监督设备)</h3>
                    <span class="tag1_text">使用此部分来配置设备可访问的URL</span>
                    <el-button>配置</el-button>
                </el-card>
            </div>
            <div class="sf_main" v-if="ml_activeIndex === 'ml_tag3'">
                <el-card class="box-card">
                    <h3>密码</h3>
                    <span class="tag1_text">使用此部分来指定在设备上执行的密码策略</span>
                    <el-button>配置</el-button>
                </el-card>
            </div>
            <div class="sf_main" v-if="ml_activeIndex === 'ml_tag4'">
                <div class="tag4_form">
                    <el-form label-width="2rem">
                        <el-form-item label="服务集标识符(SSID)">
                            <el-input v-model="formInline.user"></el-input>
                        </el-form-item>
                        <el-form-item label="自动加入">
                            <el-checkbox v-model="checked" disabled>允许设备自动加入该网络</el-checkbox>
                        </el-form-item>
                        <el-form-item label="禁用MAC地址随机化">
                            <el-checkbox v-model="checked" disabled>禁止使用私有MAC地址接入此Wi-Fi网络</el-checkbox>
                        </el-form-item>
                        <el-form-item label="隐藏网络">
                            <el-checkbox v-model="checked" disabled>目标网络未开放网络或未广播信号时，请启用此功能</el-checkbox>
                        </el-form-item>
                        <el-form-item label="安全类型">
                            <el-select v-model="formInline.region" placeholder="角色类型">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="formInline.user"></el-input>
                        </el-form-item>
                        <el-form-item label="代理">
                            <el-select v-model="formInline.region" placeholder="角色类型">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-row :gutter="20">
                                <el-col :span="8"><el-button type="primary" @click="onSubmit">设置</el-button></el-col>
                            </el-row>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="sf_main" v-if="ml_activeIndex === 'ml_tag5'">
                <el-card class="box-card">
                    <h3>Exchange ActiveSync</h3>
                    <span class="tag1_text">使用此部分来定义用于连接到Exchange服务器的设置</span>
                    <el-button>配置</el-button>
                </el-card>
            </div>
            <div class="sf_main" v-if="ml_activeIndex === 'ml_tag6'">
                <el-card class="box-card">
                    <h3>邮件</h3>
                    <span class="tag1_text">使用此部分来定义用于连接到POP或IMAP电子邮件账户的设置</span>
                    <el-button>配置</el-button>
                </el-card>
            </div>
            <div class="sf_main" v-if="ml_activeIndex === 'ml_tag7'">
                <el-card class="box-card">
                    <h3>Web Clip</h3>
                    <span class="tag1_text">使用此部分来配置Web Clip</span>
                    <el-button>配置</el-button>
                </el-card>
            </div>
        </el-card>
    </div>
</template>
<script>



export default {
    data() {
        return {
            ml_defaultIndex: 'ml_tag1',
            ml_activeIndex: 'ml_tag1',
            form: '',
            radio: '0',
            content_style: {
                'width': '15%',
            },
            size: 'small',
            memberList: [
                {
                    name: 'judy',
                },
                {
                    name: 'sang',
                }
            ],
            tableData: [
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                },
                {
                    icon: 'el-icon-star-on',
                    name: 'lucy',
                    state: '不允许使用',
                    operate: '禁止操作'
                }
            ],
            headerRowStyle: {
                'backgroundColor': '#f8f8f9'
            },
            appList: [
                {
                    iconfont: '&#xe637;',
                    name: '微信',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe600;',
                    name: 'QQ',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe663;',
                    name: '支付宝',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
                {
                    iconfont: '&#xe617;',
                    name: '夸克',
                    suffixIcon: 'el-icon-plus'
                },
            ],
            tactics_data: [
                {
                    name: '滴滴滴滴点',
                    selectable: true
                },
                {
                    name: '哒哒哒哒哒',
                    selectable: false
                }
            ],
            headerRowStyle2: {
                'backgroundColor': '#f8f8f9',
                'color': 'black'
            },
            formInline: {},
            tag5_list: [
                {
                    imgSrc: '',
                    name: '壁纸1',
                    suffixIcon: 'el-icon-plus'
                }
            ],
            count: 5
        }
    },
    methods: {
        ml_handleSelect(key, keyPath) {
            this.ml_activeIndex = key
        },
        handleClick(row) {
            // 跳转
            console.log(row);
            this.$router.push({ path: '/memberManage/memberInfo' })
        },
        isRowSelectable(row, index) {
            // 根据row的selectable属性来决定这一行是否可以被选择
            return row.selectable
        },
        handleSelectionChange(selection) {
            // 处理选中项变化
            console.log(selection);
        },
        load() {
            // this.count += 2
        }
    },
    // 使用
    mounted() {
        this.$nextTick(() => {
        });
    },
}
</script>
<style scoped>
.card_title {
    font-size: medium;
    font-weight: bold;

}

.box-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.box-card .tag1_text {
    display: block;
    padding: .25rem 0;
    font-size: .2rem;
    color: #bec2c2;
}

.platformContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sf_main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: .25rem;
}


.tag4_form {
    width: 30vw;
}

</style>